<style scoped></style>

<template>
    <div>
        <Modal
            title="参团信息"
            :value="value"
            @on-visible-change="visibleChange"
            fullscreen
        >
            <Table
                :loading="loading"
                :columns="columns"
                :no-data-text="L('NoDatas')"
                border
                :data="list"
            >
                <template slot-scope="{ row }" slot="action">
                    <Dropdown
                        @on-click="actionClick(row, $event)"
                        :transfer="true"
                    >
                        <a href="javascript:void(0)">
                            {{ L("Actions") }}
                            <Icon type="ios-arrow-down"></Icon>
                        </a>
                        <DropdownMenu slot="list">
                            <DropdownItem name="delete">{{
                                L("Delete")
                            }}</DropdownItem>
                            <DropdownItem v-if="!row.isActive" name="enActive"
                                >审核</DropdownItem
                            >
                            <DropdownItem v-if="row.isActive" name="deActive"
                                >取消审核</DropdownItem
                            >
                        </DropdownMenu>
                    </Dropdown>
                </template>
            </Table>
            <Page
                show-sizer
                class-name="fengpage"
                :total="totalCount"
                class="margin-top-10"
                @on-change="pageChange"
                @on-page-size-change="pagesizeChange"
                :page-size="pageSize"
                :current="currentPage"
            ></Page>
            <div slot="footer">
                <Button @click="cancel">{{ L("Cancel") }}</Button>
            </div>
        </Modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import AbpBase from "@/lib/abpbase";
import appconst from "@/lib/appconst";
import PageRequest from "@/store/entities/page-request";
import Ajax from "@/lib/ajax";
class PageGroupItemRequest extends PageRequest {
    linkMan: string;
    phoneNumber: string;
    isActive: boolean = null;
    groupBuyId: number = null;
}
@Component({
    components: {},
})
export default class extends AbpBase {
    @Prop({ type: Boolean, default: false }) value: boolean;
    buyTypeDic: {};
    //filters
    pagerequest: PageGroupItemRequest = new PageGroupItemRequest();

    get list() {
        return this.$store.state.groupItem.list;
    }
    get loading() {
        return this.$store.state.groupItem.loading;
    }
    cancel() {
        this.$emit("input", false);
    }
    async getBuyTypeDic() {
        let reponse = await Ajax.get(
            "/api/services/app/GroupBuyType/GetAllDic"
        );
        this.buyTypeDic = reponse.data.result;
    }
    pageChange(page: number) {
        this.$store.commit("groupItem/setCurrentPage", page);
        this.getpage();
    }
    pagesizeChange(pagesize: number) {
        this.$store.commit("groupItem/setPageSize", pagesize);
        this.getpage();
    }
    search() {
        this.$store.commit("groupItem/setCurrentPage", 1);
        this.getpage();
    }
    async getpage() {
        this.pagerequest.maxResultCount = this.pageSize;
        this.pagerequest.skipCount = (this.currentPage - 1) * this.pageSize;
        //filters

        await this.$store.dispatch({
            type: "groupItem/getAll",
            data: this.pagerequest,
        });
    }
    get pageSize() {
        return this.$store.state.groupItem.pageSize;
    }
    get totalCount() {
        return this.$store.state.groupItem.totalCount;
    }
    get currentPage() {
        return this.$store.state.groupItem.currentPage;
    }
    async created() {
        await this.getBuyTypeDic();
    }
    convertBuyType(key) {
        return this.buyTypeDic[key];
    }
    visibleChange(value: boolean) {
        if (!value) {
            this.$emit("input", value);
        } else {
            let groupBuy = this.$store.state.groupBuy.editGroupBuy;
            this.pagerequest.groupBuyId = groupBuy.id;
            this.getpage();
        }
    }
    actionClick(row, e) {
        switch (e) {
            case "delete":
                this.$Modal.confirm({
                    title: this.L("Tips"),
                    content: "你确定要删除这条记录吗",
                    okText: "确定",
                    cancelText: "取消",
                    onOk: async () => {
                        await this.$store.dispatch({
                            type: "groupItem/delete",
                            data: row,
                        });
                        await this.getpage();
                    },
                });
                break;
            case "enActive":
                Ajax.post("/api/services/app/GroupItem/EnActive", {
                    id: row.id,
                }).then((_) => {
                    row.isActive = true;
                });
                break;
            case "deActive":
                Ajax.post("/api/services/app/GroupItem/EnActive", {
                    id: row.id,
                }).then((_) => {
                    row.isActive = false;
                });
                break;
            default:
                break;
        }
    }
    columns = [
        {
            title: "团购类型",
            key: "groupBuyTypeId",
            render: (h: any, params: any) => {
                return h(
                    "span",
                    this.convertBuyType(params.row.groupBuyTypeId)
                );
            },
        },
        {
            title: "联系人",
            key: "linkMan",
            width: 120,
        },
        {
            title: "联系电话",
            key: "phoneNumber",
            width: 120,
        },
        {
            title: "意向小区",
            width: 120,
            key: "wantVillage",
        },
        {
            title: "意向楼层",
            width: 100,
            key: "wantLayer",
        },
        {
            title: "意向布局",
            width: 120,
            key: "wantLayout",
        },
        {
            title: "审核状态",
            width: 100,
            render: (h: any, params: any) => {
                return h("span", params.row.isActive ? "已审核" : "未审核");
            },
        },
        {
            title: "创建日期",
            key: "creationTime",
            width: 150,
            render: (h: any, params: any) => {
                return h("span", this.localDate(params.row.creationTime));
            },
        },
        {
            title: this.L("Actions"),
            slot: "action",
            width: 80,
            align: "center",
        },
    ];
}
</script>